<template>
  <div>
    <!-- 筛选列表 -->
    <el-card style="margin-bottom: 20px" id="search" class="search">
      <div slot="header" class="clearfix">
        <span>筛选列表</span>
      </div>
      <div class="text item">
        <el-form
          :model="queryParams"
          ref="queryForm"
          :inline="true"
          label-width="100px"
          class="serach_contant"
        >
          <el-form-item label="所在省份：" prop="provinceName">
            <el-select
              v-model="queryParams.provinceName"
              placeholder="请输入所在省份"
              clearable
              size="small"
              @keyup.enter.native="selsectProvince"
              @change="changeProvince"
            >
              <el-option
                v-for="(item, index) in selectProvince"
                :key="index"
                :label="item.provinceName"
                :value="item.provinceName"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="所在城市：" prop="cityName">
            <el-select
              v-model="queryParams.cityName"
              placeholder="请输入所在城市"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="(item, index) in selectCityName"
                :key="index"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="中学名称：" prop="schoolName">
            <el-input
              v-model="queryParams.schoolName"
              placeholder="请输入所在中学"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <!--<el-form-item label="拟报名考试：" prop="examName">
            <el-select
              v-model="queryParams.examName"
              placeholder="请选择拟报名考试"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            >
              <el-option
                v-for="dict in statusOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>-->
          <el-form-item label="申请时间：">
            <el-date-picker
              v-model="queryParams.applyTime"
              type="date"
              size="small"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
              @keyup.enter.native="handleQuery"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >查询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 标签列表 -->
    <el-card>
      <div slot="header" class="clearfix">
        <span>标签列表</span>
        <el-button
          type="primary"
          size="mini"
          style="float: right"
          @click="handleExport"
          v-hasPermi="['gwoper:apply:export']"
        >
          导出数据
        </el-button>
      </div>
      <div class="text item">
        <!-- 批量管理    -->
        <div class="changeBtn">
          <el-button
            class="btnManage"
            type="primary"
            size="mini"
            style="float: right"
            @click="allMange"
            v-text="btnText"
          ></el-button>
          <el-button
            v-if="allManage"
            type="primary"
            size="mini"
            style="float: right; margin-right: 10px"
            @click="batchDelete"
            v-hasPermi="['gwoper:apply:remove']"
            >批量办理</el-button
          >
        </div>
        <!--  Table-->
        <el-table
          v-loading="loading"
          :data="jointestList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            v-if="allManage"
            type="selection"
            width="55"
            align="center"
          />
          <!--          <el-table-column label="编号" align="center" prop="id" width="150" />-->
          <el-table-column
            type="index"
            width="80"
            align="center"
            label="编号"
          />
          <el-table-column
            label="中学名称"
            align="center"
            prop="schoolName"
            :show-overflow-tooltip="true"
          />
          <el-table-column label="所在省份" align="center" prop="provinceName" />
          <el-table-column label="所在城市" align="center" prop="cityName" />
          <el-table-column label="拟报名考试" align="center" prop="examName" />
          <el-table-column
            label="参加考试人数"
            align="center"
            prop="numberExaminees"
          />
          <el-table-column
            label="申请时间"
            align="center"
            prop="applyTime"
            width="200"
          >
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.applyTime, "{y}-{m}-{d}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleUpdate(scope.row)"
                v-hasPermi="['gwoper:apply:query']"
                >查看</el-button
              >
              <el-button
                size="mini"
                type="text"
                icon="el-icon-folder-checked"
                class="btn_close"
                @click="handleDelete(scope.row.id)"
                v-hasPermi="['gwoper:apply:remove']"
                >已办理</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- page -->
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </el-card>
    <!-- 修改标签配置对话框 -->
    <el-dialog
      title="中学统一参加考试资质"
      :visible.sync="open"
      width="700px"
      z-index="1500"
      :close-on-click-modal="false"
      append-to-body
    >
      <el-form ref="editform" :model="form">
        <el-form-item label="所在省份" prop="provinceName">
          <el-input v-model="form.provinceName" style="width: 100px" />
        </el-form-item>
        <el-form-item label="所在城市" prop="cityName">
          <el-input v-model="form.cityName" style="width: 100px" />
        </el-form-item>
        <el-form-item label="拟报名考试" prop="examName">
          <el-input v-model="form.examName" />
        </el-form-item>
        <el-form-item label="中学名称" prop="schoolName">
          <el-input v-model="form.schoolName" />
        </el-form-item>
        <el-form-item label="参加考试人数" prop="numberExaminees">
          <el-input v-model="form.numberExaminees" />
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactPerson">
          <el-input v-model="form.contactPerson" />
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactPhone">
          <el-input v-model="form.contactPhone" />
        </el-form-item>
        <!--<el-form-item label="中学纸质申请表" prop="applyQualificationImgsUrl">
          <el-image
            style="width: 200px; height: 200px"
            :src="form.applyQualificationImgsUrl"
            :preview-src-list="imgList"
          ></el-image>
          <el-button type="primary" @click="handleDownimg()"
            >下载图片</el-button
          >
        </el-form-item>-->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="open = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  JointestList,
  DelJointest,
  getProvinceName,
  getCityName,
} from "@/api/gwoper/apply";
export default {
  name: "applyPaperr",

  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 表格数据
      list: [],
      // 是否显示弹出层
      open: false,
      // 类型数据字典
      typeOptions: [],
      // 类型数据字典
      statusOptions: [],
      // 筛选省会城市
      selectProvince: [],
      selectCityName: [],
      // 表单参数
      form: {},
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        provinceName: undefined,
        cityName: undefined,
        schoolName: undefined,
        examName: undefined,
        applyTime: undefined,
      },
      //显示批量管理
      allManage: false,
      btnText: "批量管理",
      //   申请时间
      value1: "",
      // 参考资质列表
      jointestList: [],
      // 参考申请大图预览
      imgList: [],
    };
  },
  created() {
    this.getList();
    this.getProvinceName();
  },
  watch: {},
  methods: {
    /** 查询按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      console.log(this.queryParams, "11");
      this.getList();
    },
    // 筛选表单重置
    resetQuery() {
      this.$refs["queryForm"].resetFields();
      this.queryParams = {
        provinceName: "",
        cityName: "",
        schoolName: "",
        examName: "",
        applyTime: "",
      };
      this.getList();
    },
    /** 考点资质列表 */
    getList() {
      this.loading = true;
      // 获取列表
      JointestList(this.queryParams)
        .then((response) => {
          // console.log(response, "joinlist");
          if (response.code != 200) {
            this.loading = false;
            // return this.msgError(response.msg);
          }
          this.jointestList = response;
          // console.log(this.teststieList)
          this.total = response.length;
          this.$emit("closeApplyJoin", this.total);
          // console.log(this.total)
          this.loading = false;
        })
        .catch((error) => {
          this.loading = false;
          // console.log(error);
        });
    },
    // 获取筛选的省份和城市
    getProvinceName() {
      getProvinceName().then((res) => {
        // console.log(res, "ppp");
        this.selectProvince = res;
      });
    },
    changeProvince(value) {
      this.queryParams.provinceName = value;
      this.selectProvince.forEach(item=>{
        if(item.provinceName==value){
          getCityName(item.provinceId).then((res) => {
            this.selectCityName = res;
          });
        }
      })
      this.queryParams.cityName = "";
      // this.queryParams.provinceName = value.provinceName;
      // getCityName(value.provinceId).then((res) => {
      //   this.selectCityName = res;
      // });
      // this.queryParams.cityName = "";
    },
    /** 查看按钮操作 */
    handleUpdate(row) {
      this.form = row;
      this.open = true;
      // const str = this.form.applyQualificationImgsUrl;
      // const imgList = str.split("，"); //字符分割
      // this.imgList = imgList;
    },
    //批量管理
    allMange() {
      this.allManage = !this.allManage;
      if (this.allManage == true) {
        this.btnText = "完成管理";
      } else if (this.allManage == false) {
        this.btnText = "批量管理";
      }
    },
    // 批量删除
    batchDelete() {
      console.log(this.ids);
      if (this.ids.length <= 0) {
        return this.msgInfo("请选择需要删除的申请");
      }
      this.handleDelete(this.ids.join(","));
    },
    /** 已办理按钮操作 */
    handleDelete(id) {
      const ids = id;
      this.$confirm("是否确认所选择的申请已办理?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          DelJointest(ids).then((response) => {
            // console.log(response);
            if (response.code != 200) return this.msgError(response.msg);
            this.getList();
            this.ids = [];
            this.msgSuccess("办理成功");
          });
        })
        .catch(() => {
          this.msgInfo("办理取消");
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.multiple = !selection.length;
    },
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "operation-center/exportTake",
        {
          ...this.queryParams,
        },
        `参考资质列表.xlsx`
      );
    },
    // 下载图片
    handleDownimg() {
      let link = document.createElement("a");
      let url = this.form.applyQualificationImgsUrl;
      // 这里是将url转成blob地址，
      fetch(url)
        .then((res) => res.blob())
        .then((blob) => {
          // 将链接地址字符内容转变成blob地址
          link.href = URL.createObjectURL(blob);
          link.download = "pic";
          document.body.appendChild(link);
          link.click();
        });
    },
  },
};
</script>
<style lang="scss">
@import "@/assets/styles/card.scss";
// bannerlist图标的大小
.aa {
  font-size: 20px;
}
.line {
  border-bottom: 1px solid #c0c4cc;
  padding: 20px 0;
}

h4 {
  // padding-bottom: 20px;
  margin: 0 !important;
}
span {
  font-size: 4px;
}
.flex {
  display: flex;
}

.BannerList {
  .el-form-item__content {
    margin-left: 0px !important;
  }
  .btnHeader {
    justify-content: space-between;
    border-bottom: 1px solid #c0c4cc;
  }
  #header {
    justify-content: space-between;
    margin-bottom: 20px;
  }
  // search
  #search .serach_contant {
    margin-top: 20px;
  }
  //批量管理
  .allManage {
    justify-content: space-between;

    .btnManage {
      justify-content: flex-end;
    }
  }
}
</style>
